<template>
    <el-card class="common-card">
      <div class="card-title">{{title}}</div>
      <div class="card-value">{{value}}</div>
      <div class="card-chart">
        <slot></slot> <!-- 默认插槽的形式来实现不同的图形 -->
      </div>
      <div class="card-line"></div>
      <div class="card-footer">
        <slot name="footer"></slot>
      </div>
    </el-card>
  </template>
  
  <script lang="ts">
  export default {
    name:'CommonCard',
    // 以下是传入的两个参数
    props:{
      title:{
        type:String,
        default:''
      },
      value:{
        type:String,
        default:''
      }
    }
  }
  /**
   * 1. Home页面可以分成三部分 可以按上中下结构来分 也可以按业务来分
   * 2. 在Home组件内新建了三个文件夹 monitor search keyword
   * 3. 由于monitor四个结构样式有相同的结构 因此进行统一封装
   * 4. 在monitor文件夹中新建 一个components文件夹 并新建CommonCard.vue组件 写公共组件结构
   * 5. 为了验证 我们是先放到了home/index.vue
   * 
   */
  </script>
  
  <style lang="scss" scoped>
  .common-card {
    .card-title{
      font-size:12px;
      color:#999;
    }
    .card-value {
      font-size:24px;
      color:#000;
      margin:5px 0;
      letter-spacing: 1px;
    }
    .card-chart {
      height: 50px;
    }
    .card-line {
      border-bottom:1px solid #ccc;
      margin: 10px 0;
    }
    .card-footer {
      font-size:12px;
      color:#666;
      // 1. 可以使用深度选择器,将当前组件的子内容进行样式的设置
      // :deep(.emphasis) {
      //   font-weight: 600;
      //   color:red;
      // }
    }
  
   
  }
  </style>